<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../plugin/layui-v2.2.5/layui/css/layui.css">
  <!-- 教师应交材料页面 -->
</head>
<body style="overflow-y: scroll;">
  <div class="layui-form" style="width:100px;float:right;margin-right:20px">
  	<select name="documentStatus" lay-verify="required" lay-filter="documentStatus">
      <option value="已提交">已提交</option>
      <option value="未提交">未提交</option>
    </select>
  </div>
  <div id="container"></div>
  <div>
    <table class="layui-hide" id="detail"></table>  
  </div>
          
<script src="../plugin/layui-v2.2.5/layui/layui.js"></script>
<script src="../plugin/jquery-3.1.1.min.js"></script>
<script src="../plugin/Highcharts-6.0.7/code/highcharts.js"></script>
<script src="../plugin/Highcharts-6.0.7/code/modules/exporting.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>


layui.use(['table','layer','upload','form'], function(){
	var form = layui.form;
	var table = layui.table;
	
	//默认加载已审批数据
	loadCharts("已提交");
	
	function loadCharts(status){
		$.ajax({ 
			url: "/CMA/courseDocument/getAcademeDocument",
			contentType: "application/x-www-form-urlencoded",
			type:"post",
			dataType : "json",
			data:{
				"status" : status
			},
			success: function(data){
				console.log(data);
				$('#container').highcharts({
			        chart: {
			            type: 'column'
			        },
			        title: {
			            text: '各学院上交情况'
			        },
			        legend: {
			        	enabled: false
			        },
			        exporting: {  
			            enabled:false       //不显示导出功能
			        },  
			        credits: {  
			            enabled: false     //不显示LOGO 
			        },
			        xAxis: {
			            categories: data.nameList/* [
			                '数学与信息学院、软件学院',
			                '电子工程学院',
			                '材料与能源学院',
			                '水利与土木工程学院',
			                '食品学院',
			                '工程学院',
			                '生命科学学院',
			                '海洋学院',
			                '资源环境学院',
			                '动物科学学院',
			                '兽医学院',
			                '园艺学院',
			                '林学与风景园林学院',
			                '农学院',
			                '经济管理学院',
			                '公共管理学院',
			                '人文与法学学院',
			                '外国语学院',
			                '艺术学院',
			                '马克思主义学院'
			            ] */,
			            crosshair: true
			        },
			        yAxis: {
			            min: 0,
			            title: {
			                text: '份数'
			            }
			        },
			        tooltip: {
			            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
			            pointFormat:'<td style="padding:0"><b>{point.y}</b></td></tr>' ,
			            footerFormat: '</table>',
			            shared: true,
			            useHTML: true
			        },
			        plotOptions: {
			            column: {
			                borderWidth: 0
			            },
			            series: { 
			                cursor: 'pointer', 
			                events: { 
			                    click: function(e) { 
			                        //console.log(e.point); 
			                        loadDetail(e.point.category,status);
			                    } 
			                } 
			            } 
			        },
			        series: [{
			            name: '',
			            data: data.valueList/* [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4,11,11,11,11,11,11,11,11] */
			        }]
			    });
		      }
	  });
	}
	
	//切换状态监听
	form.on('select(documentStatus)', function(data){
	  loadCharts(data.value);
	});   
	
	function loadDetail(academeName,status){
		table.render({
		    elem: '#detail'
		    ,url: '/CMA/courseDocument/getDocumentByAcademe'
		    ,where :{
		    	"academeName":  academeName,
		    	"status" :status
		    }
		    ,method: 'post' 
		    ,done: function(res, curr, count){
		        //如果是异步请求数据方式，res即为你接口返回的信息。
		        //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
		        //console.log(res);
		      }
		    ,cols: [[ //标题栏
		      {field: 'courseName', title: '课程名', sort: true}
		      ,{field: 'teaherName', title: '上课教师'}
		      ,{field: 'workId', title: '工号'}
		      ,{field: 'className', title: '课程授课班级'}
		      ,{field: 'documenttype', title: '课程材料类型'}
		      ,{field: 'period', title: '授课学期'}
		      ,{field: 'remark', title: '备注', sort: true}
		    ]]
		    //,data: tableData
		    ,skin: 'line' //表格风格
		    ,even: true
		    ,page: true //是否显示分页
		    ,limits: [5, 7, 10]
		    ,limit: 5 //每页默认显示的数量 
		    ,id : "documentGrid"
		 })
	}
	
});

</script>

</body>
</html>